<template>
    <div class="layout">
        <div class="box white-block">
            <div class="application">
                <!--<p>申请单</p>-->

                <div class="head-line">申请单
                    <div class="btn">
                        <el-button @click="delXia" size="small">删除下架应用</el-button>
                        <el-button @click="del" size="small">删除</el-button>
                    </div>
                </div>
                <!--                <table-example :data="tableData" :tableColumn="header" class="mt20"></table-example>-->
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :selection="true"
                               class="mt20" @selectionChange="selectionChange">
                    <!--接受scope-->
                    <template slot="name" slot-scope="scope">
                        <!--                        <el-image :src="scope.row.icon" class="logo"></el-image>-->
                        <el-image
                            class="logo"
                            :src="scope.row.iconInfo&&scope.row.iconInfo.path"
                            fit="scale-down">
                            <div slot="placeholder" class="image-slot">
                                <i class="el-icon-loading"></i>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <span>{{scope.row.name}}</span>
                    </template>
                    <template slot="state" slot-scope="scope">
                        <span v-if="scope.row.state==1">正常</span>
                        <span v-else-if="scope.row.state==2" class="error">下架</span>
                    </template>
                </table-example>
                <div class="text-center">
                    <el-button type="primary s-btn" @click="submit">提交</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '应用名称',
                        minWidth: '10%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'description',
                        label: '提供单位',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '状态',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    }
                ],
                slotColumns: ['state', 'name'],
                delId: [],
                list: [],
                state: [],
                submitList: [],
                checked: false

            }
        },
        mounted() {
            this.getData()
        },
        update() {
            this.$method.updateView(true)
        },
        methods: {
            getData() {
                this.tableData = []
                this.$http.get('/gsOrder/getOrderFullInfo').then(result => {
                    if (result.success) {
                        for (var i = 0; i < result.data.itemList.length; i++) {
                            let list = result.data.itemList[i]
                            if (list.res.state === 2) {
                                list.res.disabled = true
                            }
                            list.res.itemId = list.id
                            this.tableData.push({orderId: result.data.itemList[i].id, ...result.data.itemList[i].res})
                        }
                        this.$method.updateView()
                    }
                })
            },
            selectionChange(val) {
                this.delId = val
            },
            delXia() {
                for (var i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].state === 1) {
                        this.$http.post('/gsOrder/removeOrderItem?checked=false', this.tableData[i].map(item => item.orderId)).then(result => {
                            if (result.success) {
                                this.getData()
                            }
                        })

                    }
                }
            },
            del() {
                for (var i = 0; i < this.delId.length; i++) {
                    this.list.push(this.delId[i])
                }
                this.$http.post('/gsOrder/removeOrderItem?checked=true', this.list.map(item => item.orderId)).then(result => {
                    if (result.success) {
                        this.getData()
                    }
                })
            },
            submit() {
                this.$http.post('/gsOrder/submit', this.delId.map(item => item.itemId)
                ).then(result => {
                    if (result.success) {
                        this.$router.push({path: '/spm/applicationSubmit'})
                    }
                })
            }
        },

        components: {
            tableExample
        }
    }
</script>
<style scoped lang="less">
    .main {
        padding-top: .3rem;
    }

    .box {
        margin-bottom: .6rem;

        .application {
            margin-left: 0.8rem;
            margin-right: 0.8rem;

            p {
                float: left;
                padding: 0.12rem 0;
                padding-left: 0.14rem;
                font-size: 0.18rem;
                position: relative;
                padding-bottom: 0.3rem;
            }

            p::after {
                content: "";
                position: absolute;
                top: 0.12rem;
                left: 0;
                width: 0.06rem;
                height: 0.2rem;
                background-color: #4995F4;
            }

            .btn {
                height: 0.34rem;
                float: right;
            }

            .s-btn {
                width: 2rem;
                height: 0.5rem;
                margin-top: 1rem;
                border-radius: 0;
            }

            .logo {
                width: .5rem;
                height: .22rem;
                float: left;
                /*background-color: pink;*/
            }
        }
    }
</style>
